<template>
  <div v-show="infoShow" class="todo-info">
    <span class="total">
      {{ total }}{{ total == 1 ? ' item left' : ' items left' }}
    </span>
    <div class="tab">
      <a
        href="#"
        v-for="(state, index) in states"
        :key="index"
        :class="current == state ? 'current' : ''"
        @click.prevent="handleClick(state)"
        >{{ state }}
      </a>
    </div>
    <button
      class="clear"
      :style="{ visibility: clearShow ? 'visible' : 'hidden' }"
      @click="$emit('clear')"
    >
      Clear Completed
    </button>
  </div>
</template>

<script>
export default {
  name: 'TodoInfo',
  props: {
    total: {
      type: Number,
      required: true,
    },
    clearShow: { type: Boolean, required: true },
    infoShow: { type: Boolean, required: true },
  },
  data() {
    return {
      current: 'all',
      states: ['all', 'active', 'completed'],
    }
  },
  methods: {
    handleClick(s) {
      this.current = s
      this.$emit('toggle', s)
    },
  },
}
</script>

<style lang="stylus">
@import '~styles/theme.styl'
@import '~styles/mixins.styl'

.todo-info
  display: flex;
  justify-content: space-between;
  height: 33px;
  margin-top: 12px;
  font-size: 18px;
  color: #666;
  .total
    padding: 3px 15px;
  .tab
    display: flex;
    a
      margin-right: 2px;
      background-color: #fff;
      text-decoration: none;
      btn($blue, true);
      &:hover
        btn($blue);
      &.current
        border: 1px solid #fff;
        background-color: $blue;
        color: white;
  .clear
    btn($cat);
    font-size: 18px;
    opacity: 1;
    &:hover
      opacity: 0.8;
</style>
